<template>
  <el-row class="header" justify="space-between" align="middle">
    <el-col :span="4">
      <el-icon v-if="isCollapse" @click="handleCollapse(false)" size="30">
        <Expand />
      </el-icon>
      <el-icon v-else @click="handleCollapse(true)" size="30">
        <Fold />
      </el-icon>
    </el-col>
    <el-col :span="6" class="user">
      欢迎您: {{ userInfo?.username }}
      <el-dropdown class="drop">
        <el-avatar shape="square" :size="30" :src="squareUrl" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人设置</el-dropdown-item>
            <el-dropdown-item @click="handleLoginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>

</template>

<script lang="ts">
import store from '../store'

export default {
  data() {
    return {
      squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.collapse.isCollapse
    },
    userInfo() {
      return this.$store.state.user.userInfo
    }
  },
  methods: {
    handleCollapse(bool: boolean) {
      return this.$store.commit('collapse/collapseMut', bool)
    },
    handleLoginOut() {
      localStorage.removeItem('vue-admin-userinfo')
      this.$store.commit('user/initUserInfoMut', null)
      this.$router.push('/login')
    }
  }

}
</script>
<style lang="scss" scoped>
.header {
  height: 100%;
}

.user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.drop {
  margin-left: 20px;
}
</style>